
<div class="layui-card layadmin-header">
  <div class="layui-breadcrumb" lay-filter="breadcrumb">
    <a lay-href="">主页</a>
    <a><cite>系统管理</cite></a>
    <a><cite>IP管理</cite></a>
  </div>
</div>

<div class="layui-fluid">
  <div class="layui-card">
    <div class="layui-tab layui-tab-brief">
      <ul class="layui-tab-title">
        <li class="layui-this">IP管理列表</li>
      </ul>
      <div class="layui-tab-content">
        <div class="layui-tab-item layui-show">
          <div class="layui-form" style="float:right; margin-bottom: 10px;">
            <div class="layui-input-inline">
              <select name="loginToBlackType" id="loginToBlackType" placeholder="拉黑类型" lay-search="">
                <option value="0" selected>系统拉黑</option>
                <option value="1">宝塔拉黑</option>
              </select>
            </div>
            <div class="layui-input-inline">
              <a id="search" class="layui-btn" data-type="reload"><i class="layui-icon layui-icon-search"></i>搜索</a>
            </div>
          </div>

          <div class="layui-row">
            <div class="layuiAdmin-btns" style="margin-bottom: 10px">
              <a class="layui-btn" id="add">新增屏蔽</a>
            </div>
          </div>
          <table id="XxPay_Mgr_Record" lay-filter="XxPay_Mgr_Record"></table>
        </div>

      </div>
    </div>
  </div>
</div>

<div class="layui-tab-content layui-hide" id="addIp" style="display: none">
  <form class="layui-form center">
    <div class="layui-form-item">
      <label class="layui-form-label">IP</label>
      <div class="layui-input-inline" style="width:300px">
        <input type="text" name="ip" lay-verify="required" id="ip" autocomplete="off" placeholder="请输入要屏蔽的IP" class="layui-input">
      </div>
    </div>
    <div class="layui-form-item">
      <label class="layui-form-label">拉黑类型</label>
      <div class="layui-input-inline">
        <input type="radio" name="loginToBlackType" value="0" title="系统拉黑" checked="checked">
        <input type="radio" name="loginToBlackType" value="1" title="宝塔拉黑">
      </div>
    </div>
    <div class="layui-form-item" >
      <label class="layui-form-label">备注</label>
      <div class="layui-input-block" style="width:300px">
        <input type="text" name="remark" id="remark" autocomplete="off" placeholder="请输入备注" class="layui-input">
      </div>
    </div>
    <div class="layui-form-item" style="margin-left: 20%">
      <div class="layui-input-block">
        <button type="button" lay-filter="add" lay-submit class="layui-btn layui-btn-sm">确认</button>
      </div>
    </div>
  </form>
</div>

<script type="text/html" id="xxpayBar">
  <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="remove">解除屏蔽</a>
</script>

<script>
layui.use(['admin', 'table', 'util'], function(){
  var $ = layui.$
  ,admin = layui.admin
  ,table = layui.table
  ,element = layui.element
  ,form = layui.form;
  
  element.render('breadcrumb', 'breadcrumb');

    $("#batchRemove").off().on("click", function(){
        var load = layer.msg('正在执行删除...', {
	        icon: 16
	        ,shade: 0.01
	        ,time: 9999999999
        });

        var ids = [];
        var errorMsg = "";
        var checkedData = table.checkStatus("tableReload").data; //获得选中的数据
        $.each(checkedData, function(){
            ids.push(this.port);
        });
        if(errorMsg) return layer.alert(errorMsg);
        if(ids.length <= 0) return layer.alert("请勾选需要解除屏蔽的IP！");

        admin.req({
            type: 'post',
            url: layui.setter.baseUrl + '/sys/login_fail_ip_record/delete',
            timeout: 1000 * 60,
            data: {ids : JSON.stringify(ids)},
            error: function(err){
            	layer.close(load);
            	layer.alert(err);
            },
            success: function(res){
                layer.close(load);
                if(res.code == 0 ) {
                    if(res.data.errMsg){
                        layer.alert(res.data.errMsg);

                    }else{
                        layer.alert("删除成功！",function(layid){
                            layer.close(layid);
                            table.reload('tableReload');
                        });
                    }
                    return false;
                }
            }
        });

    });

    $("#add").off().on("click", function(){
        $("#addIp").removeClass("layui-hide")
        // 清空参数
        $("#ip").val("");
        $("#remark").val("");
        $("input[name='loginToBlackType'][value='0']").prop('checked', true);

        layer.open({
            title: '增加屏蔽IP',
            type: 1,
            shade: 0,
            area: '500px',
            content: $('#addIp'),
            success: function(layero, index){
                form.render();
            }
        });

        form.on('submit(add)', function(data){
            layer.confirm("确定增加屏蔽IP吗?", function(index){
                layer.closeAll();
                layer.msg('正在新增屏蔽IP中...', {icon: 16});
                admin.req({
                    type: 'post',
                    url: layui.setter.baseUrl + '/sys/login_fail_ip_record/add',
                    data: data.field,
                    error: function(err){
                        layer.alert(err,{title:'发起的请求失败'})
                    },
                    success: function(res){
                        layer.closeAll('loading');
                        if(res.code == 0){
                            if (res.data) {
                                layer.alert(res.data.msg, function(index){
                                    layer.closeAll();
                                    table.reload('tableReload');
                                })
                            }else {
                                layer.alert(res.msg, function(index){
                                    layer.closeAll();
                                    table.reload('tableReload');
                                })
                            }
                        }
                    }
                });
            });
            return false;//阻止跳转
        });

    });

  var ipTem = function(d){
      if (d.port) {
          return "屏蔽IP: [" + d.port + "]";
      }else if (d.ip) {
          return "屏蔽IP: [" + d.ip + "]";
      }else {
          return "";
      }
  };

  var remarkTem = function(d){
      if (d.ps) {
          return d.ps;
      }else if (d.remark) {
          return d.remark;
      }else {
          return "";
      }
  };

  var timeTem = function(d){
      if (d.addtime) {
          return d.addtime;
      }else if (d.createTime) {
          return layui.util.toDateString(d.createTime, "yyyy-MM-dd HH:mm:ss");
      }else {
          return "";
      }
  };

  var TplStatus = function(d){
      if (d.status == "-1") {
          return '<a class="layui-btn layui-btn-danger layui-btn-xs" >已屏蔽</a>';
      }else if (d.status == "0") {
          return '<a class="layui-btn layui-btn-xs" >未屏蔽</a>';
      }else if (d.status == "1") {
          return '<a class="layui-btn layui-btn-danger layui-btn-xs" >已屏蔽</a>';
      }
  };


    var loginToBlackType = $("#loginToBlackType").val();

  //通知列表
  table.render({
    elem: '#XxPay_Mgr_Record'
    ,url: layui.setter.baseUrl + '/sys/login_fail_ip_record/list' //通知列表接口
    ,where: {
        access_token: layui.data(layui.setter.tableName).access_token,
        loginToBlackType: loginToBlackType
    }
    ,id: 'tableReload'
    ,page: false
    ,cols: [[
      {field: 'port', width: 220, title: 'IP',templet: ipTem}
      ,{field: 'ps', title: '备注', templet: remarkTem}
      ,{field: 'status', title: '状态', templet: TplStatus}
      ,{field: 'addtime', width: 220, title: '创建时间', templet: timeTem}
      ,{field: 'edit', width: 120, fixed: 'right', title: '操作', toolbar: '#xxpayBar' }
    ]]
      ,skin: 'line'
  });

  //监听工具条
  table.on('tool(XxPay_Mgr_Record)', function(obj){
    var data = obj.data;
    var ip = "";
    var id = "";
    if (data.port) ip = data.port; id = data.id;
    if (data.ip) ip = data.ip;
    if(obj.event === 'remove'){
        layer.confirm("确定删除屏蔽IP吗?", function(index) {
          var load = layer.msg('正在执行删除...', {
              icon: 16
              ,shade: 0.01
              ,time: 9999999999
          });
          admin.req({
              type: 'post',
              url: layui.setter.baseUrl + '/sys/login_fail_ip_record/delete',
              timeout: 1000 * 60,
              data: {
                  ip : ip,
                  id : id,
                  loginToBlackType: data.loginToBlackType
              },
              error: function(err){
                  layer.close(load);
                  layer.alert(err);
              },
              success: function(res){
                  layer.close(load);
                  if(res.code == 0 ) {
                      if (res.data) {
                          layer.alert(res.data.msg, function(index){
                              layer.closeAll();
                              table.reload('tableReload');
                          })
                      }else {
                          layer.alert(res.msg, function(index){
                              layer.closeAll();
                              table.reload('tableReload');
                          })
                      }
                      return false;
                  }
              }
          });
        });
    }
  });

    // 搜索
    var $ = layui.$, active = {
        reload: function(){
            var loginToBlackType = $('#loginToBlackType').val();
            //执行重载
            table.reload('tableReload', {
                page: {
                    curr: 1 //重新从第 1 页开始
                }
                ,where: {
                    loginToBlackType: loginToBlackType
                }
            });
        }
    };

    $('#search').on('click', function() {
        var type = $(this).data('type');
        active[type] ? active[type].call(this) : '';
        return false;
    });

    // 渲染表单
  form.render();
});
</script>